<template>
    <div class="pageWrapper">

        <Form class="search_box">
            <FormItem label="银行流水号：" style="width:40%">
                <Input type="text" v-model="value" placeholder="请填写银行流水号" clearable/>
            </FormItem>

            <div>
                <Button type="primary" @click="bandleSearch">查询</Button>
                <Button @click="bandleClear">清空</Button>
            </div>
        </Form>

        <h2 class="title">
            <!-- 已选 <span>{{ tableData.length }}</span> 条交易流水 -->
            请勾选需要标注原因的流水记录
        </h2>
        <Table :columns="columns" :data="currentData" border @on-selection-change="onSelectionChange"></Table>
        <div :style="{ textAlign: 'right' }" style="margin-top: 20px">
            <Page
                :total="pageIndex.total"
                :current="pageIndex.currentPage"
                :page-size="pageIndex.pageSize"
                show-total
                show-elevator
                show-sizer
                :page-size-opts="[50, 100, 150, 200]"
                @on-change="handlePageChange"
                @on-page-size-change="handlePageSizeChange"
            />
        </div>
        <Form>
            <FormItem label="备注：">
                <Select v-model="remark" style="width:200px" @on-change="onChange" :label-in-value="true">
                    <Option v-for="item in differenceList" :value="item.value" :key="item.value">{{ item.value }}</Option>
                </Select>
            </FormItem>
            <Button type="primary" @click="submitFun">确认标注</Button>
            <Button type="primary" @click="goBack" :style="{width: '80px'}">返回</Button>
        </Form>
    </div>
</template>
<script>
import { Message, Table, Page, Modal,Form, FormItem, Select, Option, Button, Input } from "view-design";
import AbnormalCause from "@/components/AbnormalCause";
import { namespace } from "../Module/settlementAbnormalModule";
import Authc from "@/components/Authc";
import config from "@/utils/config";
import appService from "@/utils/appService";
import util from '@/utils/util';

export default {
    name: "settlementAbnormalBatchProcessing",
    components: {
        AbnormalCause,
        Authc,
        Table,
        Message,
        Page,
        Form,
        FormItem,
        Select,
        Option,
        Button,
        Input
    },
    data() {
        return {
            value: '',
            namespace: namespace,
            isClear: true,
            loading: true,
            tableData: [] /** 所有选中的数据 **/,
            currentData: [] /** 当前页面的数据 **/,
            pageIndex: {},
            differenceList: [] /** 差异原因 **/,
            currentPage: 1,
            pageSize: 10,
            remark: '', /** 差异原因 */
            finish_type: '', /** 差异类型 */
            pay_channel_orderids_list: [], /** 标注的原因的银行流水好 */
            // columns: [
                //     {
                //         title: "平台流水",
                //         align: "center",
                //         children: [
                //             {
                //               type: 'selection',
                //               align: "center",
                //               minWidth: 55
                //             },
                //             {
                //                 title: "序号",
                //                 type: "index",
                //                 align: "center",
                //                 minWidth: 80
                //             },
                //             {
                //                 title: "交易类型",
                //                 key: "transactionTypeCn",
                //                 align: "center",
                //                 minWidth: 100
                //             },
                //             {
                //                 title: "支付订单号",
                //                 key: "paymentId",
                //                 align: "center",
                //                 minWidth: 100
                //             },
                //             {
                //                 title: "渠道支付订单号",
                //                 key: "flowId",
                //                 align: "center",
                //                 minWidth: 205
                //             },
                //             {
                //                 title: "商户编码",
                //                 key: "merchantCode",
                //                 align: "center",
                //                 minWidth: 100
                //             },
                //             {
                //                 title: "订单金额(元)",
                //                 key: "orderAmount",
                //                 align: "center",
                //                 minWidth: 110,
                //                 render: function(h, data) {
                //                     return h("span", data.row.orderAmount / 100);
                //                 }
                //             },
                //             {
                //                 title: "优惠金额(元)",
                //                 key: "discount",
                //                 align: "center",
                //                 minWidth: 110,
                //                 render: function(h, data) {
                //                     return h("span", data.row.discount / 100);
                //                 }
                //             },
                //             {
                //                 title: "交易金额(元)",
                //                 key: "payAmount",
                //                 align: "center",
                //                 minWidth: 110,
                //                 render: function(h, data) {
                //                     return h("span", data.row.payAmount / 100);
                //                 }
                //             },
                //             {
                //                 title: "通道费(元)",
                //                 key: "serviceCharge",
                //                 align: "center",
                //                 minWidth: 100,
                //                 render: function(h, data) {
                //                     return h("span", data.row.serviceCharge / 100);
                //                 }
                //             }
                //         ]
                //     },
                //     {
                //         title: "银行流水",
                //         align: "center",
                //         children: [
                //             {
                //                 title: "订单金额(元)",
                //                 key: "bankOrderAmount",
                //                 align: "center",
                //                 minWidth: 110,
                //                 render: function(h, data) {
                //                     return h(
                //                         "span",
                //                         data.row.bankOrderAmount / 100
                //                     );
                //                 }
                //             },
                //             {
                //                 title: "优惠金额(元)",
                //                 key: "bankDiscount",
                //                 align: "center",
                //                 minWidth: 110,
                //                 render: function(h, data) {
                //                     return h("span", data.row.bankDiscount / 100);
                //                 }
                //             },
                //             {
                //                 title: "交易金额(元)",
                //                 key: "bankPayAmount",
                //                 align: "center",
                //                 minWidth: 110,
                //                 render: function(h, data) {
                //                     return h(
                //                         "span",
                //                         data.row.bankPayAmount / 100
                //                     );
                //                 }
                //             },
                //             {
                //                 title: "通道费(元)",
                //                 key: "bankServiceCharge",
                //                 align: "center",
                //                 minWidth: 110,
                //                 render: function(h, data) {
                //                     return h(
                //                         "span",
                //                         data.row.bankServiceCharge / 100
                //                     );
                //                 }
                //             },
                //             {
                //                 title: "支付时间",
                //                 key: "payTime",
                //                 align: "center",
                //                 minWidth: 150
                //             }
                //         ]
                //     },
                //     {
                //         title: "对账结果",
                //         align: "center",
                //         fixed: "right",
                //         children: [
                //             {
                //                 title: "对账时间",
                //                 key: "reconciliationTime",
                //                 align: "center",
                //                 fixed: "right",
                //                 minWidth: 150
                //             },
                //             {
                //                 title: "差异(元)",
                //                 key: "diffAmount",
                //                 align: "center",
                //                 fixed: "right",
                //                 minWidth: 100,
                //                 render: (h, params) => {
                //                     return h("span", params.row.diffAmount / 100);
                //                 }
                //             }
                //         ]
                //     }
            // ]
            columns: [
                {
                    type: 'selection',
                    align: "center",
                    minWidth: 55
                },
                {
                    title: '银行流水号',
                    align: "center",
                    key: 'payChannelOrderid',
                    minWidth: 230
                },
                {
                    title: '商品名称',
                    align: "center",
                    key: 'goodsName',
                    minWidth: 180
                },
                {
                    title: '门店名称',
                    align: "center",
                    key: 'storeName',
                    minWidth: 220
                },
                {
                    title: '门店编号',
                    align: "center",
                    key: 'storeNo',
                    minWidth: 200
                },
                {
                    title: '商户订单号',
                    align: "center",
                    key: 'merOrderNo',
                    minWidth: 180
                },
                {
                    title: '支付方式',
                    align: "center",
                    key: 'payWayCn',
                    minWidth: 100
                },
                {
                    title: '交易类型',
                    align: "center",
                    key: 'transactionTypeCn',
                    minWidth: 100
                },
                {
                    title: '交易币种',
                    align: "center",
                    key: 'transactionCurrency',
                    minWidth: 100
                },
                {
                    title: '付款银行',
                    align: "center",
                    key: 'payingBank',
                    minWidth: 170
                },
                {
                    title: '交易金额(元)',
                    align: "center",
                    key: 'payAmount',
                    minWidth: 110,
                    render: (h, params) => {
                        let item = Math.abs(params.row.payAmount / 100);
                        return h('span', util.toMoney(item))
                    }
                },
                {
                    title: '手续费(元)',
                    align: "center",
                    key: 'serviceCharge',
                    minWidth: 110,
                    render: (h, params) => {
                        return h('span', util.toMoney(params.row.serviceCharge / 100))
                    }
                },
                {
                    title: '费率',
                    align: "center",
                    key: 'rate',
                    minWidth: 90,
                    render: (h, params) => {
                        return h('span', params.row.rate + '%')
                    }
                },
                {
                    title: '平台优惠金额(元)',
                    align: "center",
                    key: 'platformPreferentialAmount',
                    minWidth: 140,
                    render: (h, params) => {
                        return h('span', util.toMoney(params.row.platformPreferentialAmount / 100))
                    }
                },
                {
                    title: '交易日期',
                    align: "center",
                    key: 'payDateStr',
                    minWidth: 150
                },
                {
                    title: '交易时间',
                    align: "center",
                    key: 'payTimeStr',
                    minWidth: 150
                }
            ]
        };
    },
    created() {
        this.getDataList();
        this.getDiffCauseList();
    },
    methods: {
        bandleSearch () {
            this.getDataList();
            console.log(this.value, '-----')
        },
        bandleClear () {
            this.value = '';
        },
        goBack () {
            this.$router.go(-1)
        },
        onChange (e) {
            this.remark = e.value;
            this.finish_type = this.differenceList.find(el => el.value == e.value).type
        },
        onSelectionChange (e) {
            this.pay_channel_orderids_list = e.map( e => e.payChannelOrderid);
        },
        /** list */
        async getDataList () {
            try {
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    payChannelOrderid: this.value
                }
                let res = await this.$store.dispatch(`${namespace}/getErrorData`, params);
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    if (data) {
                        this.pageIndex = data.pagination;
                        this.currentData = data.list;
                    } else {
                        this.pageIndex = {};
                        this.currentData = [];
                    }
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },
        /** 获取差异原因 **/
        async getDiffCauseList() {
            try {
                let obj = {
                    module: "payment_diff_config"
                };
                let res = await this.$store.dispatch(
                    `${namespace}/getDiffCauseList`,
                    obj
                );
                this.differenceList = res.data.data.map(e => {
                    return {
                        key: e.code,
                        value: e.name,
                        type: e.type
                    };
                });
                // this.differenceList.push({
                //     key: "custom",
                //     value: "自定义"
                // });
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        /** 分页变化 **/
        handlePageChange(currentPage) {
            this.currentPage = currentPage;
            this.getDataList()
        },
        /** 分页大小变化 **/
        handlePageSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getDataList()
        },
        /** 获取差异原因 **/
        submitFun(data) {
            try {
                if (!this.pay_channel_orderids_list.length) {
                    this.$Message.warning({
                        content: '请正确选择数据'
                    })
                    return;
                }
                if (!this.remark) {
                    this.$Message.warning({
                        content: '请选择备注'
                    })
                    return;
                }
                let params = {
                    finish_type: this.finish_type,
                    remark: this.remark,
                    pay_channel_orderids: this.pay_channel_orderids_list
                }
                let parm = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
                Modal.confirm({
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "div",
                                {},
                                "提交后不可更改差异原因和备注，是否确认提交?"
                            )
                        ]);
                    },
                    onOk: async () => {
                        await this.$store.dispatch(
                            `${namespace}/allDifftHandle`,
                            params
                        );
                        this.$Message.success({
                            content: "处理成功！"
                        });
                        let res = await this.$store.dispatch(`${namespace}/getErrorData`, parm);
                        if (res.data.ret === 0) {
                            let data = res.data.data;
                            this.pageIndex = data.pagination;
                            this.currentData = data.list;
                            this.pay_channel_orderids_list = [];
                        }
                        // setTimeout(() => {
                        //     location.reload()
                        // }, 500);
                    }
                });
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        }
    }
};
</script>
<style scoped>
.title {
    display: inline-block;
    font-size: 16px;
}
.title span {
    font-size: 18px;
    color: #3399ff;
}
.search_box {
    display: flex;
    justify-content: space-between;
}
</style>
